<template>
	<view class="record">
		<u-navbar title="记录" bgColor="#000" :placeholder="true" :autoBack="true" leftIconColor="#fff"
			:titleStyle="{ color: '#fff' }"></u-navbar>
		<view class="record-content">
			<view class="left-side">
				<text class="bar-item" v-for="item in leftBar" :key="item">{{ item }}</text>
			</view>
			<div class="right-side">
				<u--form labelPosition="left" :model="model" ref="recordForm">
					<!-- 时间 -->
					<text class="bar-item" @tap="timePickerShow = true">
						{{ currentDate }} {{ model.date }}
					</text>
					<!-- 时长 -->
					<view class="bar-item">
						<u-form-item prop="time" @tap="getTimeColumns">
							<u--input v-model="model.time" disabled disabledColor="#ffffff" placeholder="请选择时长"
								border="none"></u--input>
							<u-icon name="clock" size="20" />
						</u-form-item>
					</view>
					<!-- 安全措施 -->
					<view class="bar-item small-padding" v-if="model.mode === 'every'">
						<view class="my-group">
							<u-button v-for="item in groups.safety" :class="[model.safety === item ? 'active' : '']"
								:key="item" :text="item" shape="circle" size="small"
								@click="model.safety = item"></u-button>
						</view>
					</view>
					<!-- 发起 -->
					<view class="bar-item small-padding" v-if="model.mode === 'every'">
						<view class="my-group">
							<u-button v-for="item in groups.begin" :class="[model.begin === item ? 'active' : '']"
								:key="item" :text="item" shape="circle" size="small"
								@click="model.begin = item"></u-button>
						</view>
					</view>
					<!-- 高潮 -->
					<view class="bar-item small-padding">
						<view class="my-group">
							<u-button v-for="item in groups.highest"
								:class="[model.highest.includes(item) ? 'active' : '']" :key="item" :text="item"
								shape="circle" size="small" @click="updateModel('highest', item)"></u-button>
						</view>
					</view>
					<!-- 情趣内衣 -->
					<view class="bar-item small-padding" v-if="model.mode === 'every'">
						<view class="my-group">
							<u-button v-for="item in groups.wear" :class="[model.wear.includes(item) ? 'active' : '']"
								:key="item" :text="item" shape="circle" size="small"
								@click="updateModel('wear', item)"></u-button>
						</view>
					</view>
					<!-- 玩具 -->
					<view class="bar-item small-padding">
						<view class="my-group">
							<u-button v-for="item in groups.toy" :class="[model.toy.includes(item) ? 'active' : '']"
								:key="item" :text="item" shape="circle" size="small"
								@click="updateModel('toy', item)"></u-button>
						</view>
					</view>
					<!-- 游戏 -->
					<view class="bar-item small-padding">
						<view class="my-group">
							<u-button v-for="item in groups.game" :class="[model.game.includes(item) ? 'active' : '']"
								:key="item" :text="item" shape="circle" size="small"
								@click="model.game = item"></u-button>
						</view>
					</view>
					<!-- 备注 -->
					<view class="bar-item small-padding">
						<u--textarea v-model="model.remark" placeholder="输入想说的话"></u--textarea>
					</view>
				</u--form>
				<u-datetime-picker :show="timePickerShow" v-model="model.date" mode="time"
					@cancel="timePickerShow = false" @confirm="confirmSelect"></u-datetime-picker>
			</div>
		</view>
		<u-button type="primary" shape="circle" text="保存" @tap="localSave"></u-button>
		<time-record ref="timeRecord" :active-id="model.timeId" @confirm="confirm"></time-record>
	</view>
</template>

<script>
	import moment from "moment"
	import timeRecord from "../../components/timeRecord.vue"
	export default {
		name: "record",
		components: {
			timeRecord
		},
		data() {
			return {
				leftBar: ['时间', '时长', '安全措施', '发起', '高潮', '情趣内衣', '玩具', '游戏', '备注'],
				leftMode: [1, 1, 0, 0, 1, 0, 1, 1, 1], // 自爱包含内容为1
				model: {
					mode: "",
					date: moment().format("HH:mm"),
					time: "",
					timeId: -1,
					safety: "",
					begin: "",
					highest: [],
					wear: [],
					toy: [],
					game: "",
					remark: ""
				},
				groups: {
					safety: ['套套', '药药', '无'],
					begin: ['我发起', '伴侣发起'],
					highest: ['我', '伴侣', '无'],
					wear: ['我', '伴侣', '无'],
					toy: ['我', '伴侣', '无'],
					game: ['有', '无']
				},
				currentDate: "",
				timePickerShow: false,
				currentId: ""
			}
		},
		onLoad(option) {
			this.model.mode = option.type
			if (option.type === "self") {
				this.leftBar = this.leftBar.filter((_, ind) => {
					return this.leftMode[ind] === 1
				})
				this.groups.highest = this.groups.toy = ['有', '无']
			}
			this.currentDate = option.date
			this.currentId = ""
			if (option.id) {
				this.currentId = option.id
				this.model = uni.getStorageSync("actions")[option.date].filter(item => item.id == option.id)[0]
			}
		},
		methods: {
			moment,
			getTimeColumns() {
				this.$refs.timeRecord.open()
			},
			updateModel(key, value) {
				let ind = this.model[key].findIndex(item => item === value)
				if (ind !== -1) {
					this.model[key] = this.model[key].filter(item => item !== value)
				} else {
					if (Array.isArray(this.model[key])) {
						this.model[key] = value === "无" ? [] : this.model[key].filter(item => item !== '无')
					}
					this.model[key].push(value)
				}
			},
			localSave() {
				let actions = uni.getStorageSync("actions") || {}
				if (actions[this.currentDate] && actions[this.currentDate].length) {
					if (!this.currentId) {
						actions[this.currentDate].unshift({
							id: +new Date(),
							...this.model
						})
					} else {
						let ind = actions[this.currentDate].findIndex(item => {
							return item.id == this.currentId
						})
						actions[this.currentDate][ind] = {
							id: this.currentId,
							...this.model
						}
					}
				} else {
					actions[this.currentDate] = [{
						id: +new Date(),
						...this.model
					}]
				}
				uni.setStorageSync("actions", actions)
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.ifNeedRefresh = true;
				uni.navigateBack()
			},
			confirmSelect({
				value
			}) {
				this.model.date = value
				this.timePickerShow = false
			},
			confirm({
				id,
				time
			}) {
				this.model.timeId = id
				this.model.time = time
			}
		}
	}
</script>

<style lang="less" scoped>
	.record {
		height: 100vh;
		background-color: #000;
		display: flex;
		flex-direction: column;
		padding: 0 5% 5%;
		box-sizing: border-box;

		.record-content {
			height: 100%;
			width: 100%;
			margin-bottom: 20px;
			background-color: rgba(255, 255, 255, .1);
			border-radius: 16px;
			display: flex;
			justify-content: space-between;
			align-items: stretch;
			overflow: hidden;
			color: #ccc;
			overflow-y: scroll;

			&>view {
				display: flex;
				flex-direction: column;
			}

			.bar-item {
				width: 100%;
				padding: 16px 0;
				font-size: 16px;

				&.small-padding {
					padding: 13px 0;
				}

				/deep/ input {
					color: #fff !important;
				}

				/deep/ .my-group {
					display: flex;
					justify-content: space-between;

					button {
						margin-right: 10px;
						color: #fff;
						background-color: transparent;
						border-width: 1px;

						&.active {
							background-color: #3c9cff;
							border-color: #3c9cff;
						}

						&:last-child {
							margin: 0;
						}
					}
				}

				/deep/ .u-textarea {
					background-color: rgba(255, 255, 255, .5);

					textarea {
						color: #fff;
					}
				}
			}

			.left-side {
				width: 30%;
				background-color: rgba(255, 255, 255, .1);

				.bar-item {
					text-align: center;
				}
			}

			.right-side {
				flex: 1;
				color: #fff;
				padding: 0 20px;
				height: fit-content;

				/deep/ .u-form {
					display: flex;
					flex-direction: column;

					.u-form-item>view {
						padding: 0;

						.u-form-item__body__right__content>view {
							flex-direction: row;

							.u-icon__icon {
								margin-left: 16px;
							}
						}
					}

					input {
						padding-left: 10px;
						background-color: rgba(0, 0, 0, .5);
						border-radius: 4px;
					}
				}
			}
		}
	}
</style>